import 'package:auto_route/auto_route.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/services.dart';

@RoutePage()
class PhoneLoginScreen extends StatelessWidget {
  const PhoneLoginScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      backgroundColor: CupertinoColors.systemBackground,
      navigationBar: const CupertinoNavigationBar(
        leading: CupertinoNavigationBarBackButton(),
        border: null,
      ),
      child: SafeArea(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 20),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              _buildHeader(context),
              const SizedBox(height: 32),
              _buildPhoneInputSection(context),
              const Spacer(),
              _buildContinueButton(),
              const SizedBox(height: 40),
              _buildSocialLoginSection(context),
              const SizedBox(height: 20),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildHeader(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          'Login by mobile number',
          style: CupertinoTheme.of(context).textTheme.navLargeTitleTextStyle,
        ),
        const SizedBox(height: 8),
        Text(
          "we'll send a verification code on this number",
          style: TextStyle(
            color: CupertinoColors.secondaryLabel.resolveFrom(context),
            fontSize: 16,
          ),
        ),
      ],
    );
  }

  Widget _buildPhoneInputSection(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        _buildCountryCodeRow(context),
        const SizedBox(height: 8),
        CupertinoTextField(
          placeholder: 'Mobile number',
          keyboardType: TextInputType.phone,
          prefix: Padding(
            padding: const EdgeInsets.only(left: 8),
            child: Text(
              '+86',
              style: TextStyle(
                color: CupertinoColors.label.resolveFrom(context),
              ),
            ),
          ),
          decoration: BoxDecoration(
            border: Border.all(color: CupertinoColors.systemGrey),
            borderRadius: BorderRadius.circular(8),
          ),
          inputFormatters: [
            FilteringTextInputFormatter.digitsOnly,
            LengthLimitingTextInputFormatter(11),
          ],
        ),
      ],
    );
  }

  Widget _buildCountryCodeRow(BuildContext context) {
    return GestureDetector(
      onTap: () => (),
      child: Row(
        children: [
          Image.asset(
            'assets/flags/cn.png',
            width: 24,
            package: 'cupertino_icons',
          ),
          const SizedBox(width: 8),
          Text(
            'China (+86)',
            style: TextStyle(
              color: CupertinoColors.secondaryLabel.resolveFrom(context),
            ),
          ),
          const Icon(
            CupertinoIcons.chevron_down,
            size: 16,
            color: CupertinoColors.systemGrey,
          ),
        ],
      ),
    );
  }

  Widget _buildContinueButton() {
    return SizedBox(
      width: double.infinity,
      child: CupertinoButton(
        color: CupertinoColors.systemBlue,
        borderRadius: BorderRadius.circular(8),
        onPressed: () {},
        child: const Text('Continue'),
      ),
    );
  }

  Widget _buildSocialLoginSection(BuildContext context) {
    return Column(
      children: [
        Text(
          'Or continue with',
          style: TextStyle(
            color: CupertinoColors.secondaryLabel.resolveFrom(context),
          ),
        ),
        const SizedBox(height: 20),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            _buildSocialButton(
              icon: CupertinoIcons.app,
              label: 'Apple',
              color: CupertinoColors.label,
              context: context,
            ),
            const SizedBox(width: 40),
            _buildSocialButton(
              icon: CupertinoIcons.chat_bubble,
              label: 'Facebook',
              color: CupertinoColors.systemBlue,
              context: context,
            ),
          ],
        ),
      ],
    );
  }

  Widget _buildSocialButton({
    required IconData icon,
    required String label,
    required Color color,
    required BuildContext context,
  }) {
    return Column(
      children: [
        CupertinoButton(
          padding: EdgeInsets.zero,
          onPressed: () {},
          child: Container(
            width: 60,
            height: 60,
            decoration: BoxDecoration(
              color: CupertinoColors.tertiarySystemBackground.resolveFrom(
                context,
              ),
              borderRadius: BorderRadius.circular(30),
            ),
            child: Icon(icon, color: color, size: 28),
          ),
        ),
        const SizedBox(height: 4),
        Text(
          label,
          style: TextStyle(
            color: CupertinoColors.secondaryLabel.resolveFrom(context),
            fontSize: 12,
          ),
        ),
      ],
    );
  }

  // void _showCountryPicker(BuildContext context) {
  //   showCupertinoModalPopup(
  //     context: context,
  //     builder: (_) => const CountryPickerSheet(),
  //   );
  // }
}
